<div>
  <h1>Edit Your Profile</h1>
  <hr>
  <div class="col-md-4">
    <form [formGroup]="profileForm"
          (ngSubmit)="saveProfile(profileForm.value)"
          autocomplete="off"
          novalidate>
      <div class="form-group"
           [ngClass]="{'error': !isFirstNameValid}">
        <label for="firstName">First Name:</label>
        <em *ngIf="!isFirstNameValid && profileForm.controls.firstName.errors.required">Required</em>
        <em *ngIf="!isFirstNameValid && profileForm.get('firstName').errors.pattern">firstName starts with a letter</em>
        <input formControlName="firstName"
               id="firstName"
               type="text"
               class="form-control"
               placeholder="First Name..." />
      </div>
      <div class="form-group"
           [class.error]="!isLastNameValid">
        <label for="lastName">Last Name:</label>
        <em *ngIf="!isLastNameValid">Required</em>
        <input formControlName="lastName"
               id="lastName"
               type="text"
               class="form-control"
               placeholder="Last Name..." />
      </div>

      <button type="submit"
              class="btn btn-primary"
              [disabled]="profileForm.invalid">Save</button>
      <button (click)="cancel()"
              type="button"
              class="btn btn-default">Cancel</button>
      <button (click)="logout()"
              type="button"
              class="btn btn-warning"
              style="float:right;">Logout</button>
    </form>
  </div>
</div>
